<template>
	<view class="container">
		<!-- 顶部会员中心 -->
		<view class="header">
			<view class="header-content">
				<view class="user-info">
					<!-- 头像 -->
					<image v-if="avatarUrl" :src="avatarUrl" class="avatar"></image>
					<view v-else class="avatar default-avatar"></view>
					<view class="username-section">
						<text class="username">{{userName}}</text>
						<view class="badge">vip</view>
					</view>
				</view>
				<view class="icons">
					<!-- 信息图片 -->
					<image src="/static/motif/xinxi1.png" class="icon" @click="messageService"></image>
					<!-- 设置 图片 -->
					<image src="/static/motif/shezhi1.png" class="icon" @click="setting"></image>
				</view>
			</view>
		</view>

		<!-- 订单 -->
		<view class="orders-section">
			<view class="orders-header">
				<text class="section-title">我的订单</text>
				<text class="review-meta" @click="orderCenter">更多></text>
			</view>
			<view class="order-status">
				<view class="status-item">
					<image src="/static/motif/daifukuan1.png" class="order-icon"></image>
					<text class="status-text" @click="orderCenter">待付款</text>
				</view>
				<view class="status-item">
					<image src="/static/motif/daifahuo1.png" class="order-icon"></image>
					<text class="status-text" @click="orderCenter">待发货</text>
				</view>
				<view class="status-item">
					<image src="/static/motif/daishouhuo2.png" class="order-icon"></image>
					<text class="status-text" @click="orderCenter">待收货</text>
				</view>
				<view class="status-item">
					<image src="/static/motif/daipingjia1.png" class="order-icon"></image>
					<text class="status-text" @click="orderCenter">待评价</text>
				</view>
			</view>
		</view>

		<!-- 钱包 -->
		<view class="wallet-section">
			<view class="orders-header">
				<text class="section-title">我的钱包</text>
				<text class="review-meta" @click="myWallet">更多></text>
			</view>
			<view class="wallet-details">
				<view class="wallet-item">
					<text>{{ wallet.settledIncome }}</text>
					<text>已结算收入(元)</text>
				</view>
				<view class="wallet-item">
					<text>{{ wallet.estimatedIncome }}</text>
					<text>预估收入(元)</text>
				</view>
				<view class="wallet-item">
					<text>{{ wallet.reward }}</text>
					<text>奖励金(元)</text>
				</view>
			</view>
		</view>

		<!-- 设置 -->
		<view class="settings-section">
			<view class="setting-item">
				<view class="item-content" @click="shippingAddress">
					<image class="arrow1" src="/static/motif/dizhi.png"></image>
					<text>地址管理</text>
				</view>
				<image class="arrow" src="/static/motif/xiayibu1.png" @click="shippingAddress"></image>
			</view>
			<view class="setting-item">
				<view class="item-content">
					<image class="arrow1" src="/static/motif/xinxi3.png"></image>
					<text>支付人信息</text>
				</view>
				<image class="arrow" src="/static/motif/xiayibu1.png"></image>
			</view>
			<view class="setting-item">
				<view class="item-content" @click="commodity">
					<image class="arrow1" src="/static/motif/shangpinshoucang1.png"></image>
					<text>商品收藏</text>
				</view>
				<image class="arrow" src="/static/motif/xiayibu1.png" @click="commodity"></image>
			</view>
			<view class="setting-item">
				<view class="item-content">
					<image class="arrow1" src="/static/motif/jiameng1.png"></image>
					<text>申请分销</text>
				</view>
				<image class="arrow" src="/static/motif/xiayibu1.png"></image>
			</view>
			<view class="setting-item">
				<view class="item-content" @click="customerService">
					<image class="arrow1" src="/static/motif/kefuzhongxin1.png"></image>
					<text>客服中心</text>
				</view>
				<image class="arrow" src="/static/motif/xiayibu1.png" @click="customerService"></image>
			</view>
		</view>

		<!-- 推荐 -->
		<view class="recommendations">
			<text class="section-title">为你推荐</text>
			<view class="product-list" @click="recommend">
				<view class="product-item" v-for="(product, index) in products" :key="index">
					<image class="product-image" :src="product.image"></image>
					<text class="product-name">{{ product.name }}</text>
					<text class="product-price">￥{{ product.price }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getuser,
	
	} from '@/api/user.js';

	export default {
		data() {
			return {
				// 头像地址 如果没有头像设为空
				avatarUrl: '',
				userName: '',
				// 模拟推荐
				products: [{
						name: '1111111 100g',
						price: 299,
						image: '/static/putao.jpg'
					},
					{
						name: '2222222 15g',
						price: 299,
						image: '/static/mangguo.jpg'
					},
					{
						name: '2222222 15g',
						price: 299,
						image: '/static/mangguo.jpg'
					},
				],
				// 钱包数据
				wallet: {
					settledIncome: 0,
					estimatedIncome: 0,
					reward: 0
				}

			};
		},
		methods: {
			//获取用户信息
			getlistuser() {
				getuser({
					userId: this.$cookies.get("id")
				}).then(res => {
					if (res.message == "success") {
						this.userName = res.data.userName || "未设置昵称";
						this.phoneNumber = res.data.userPhone || "未绑定手机号";
						this.avatarUrl = res.data.userImage;
					} else {
						uni.showToast({
							type: 'error',
							icon: 'none',
							title: '获取失败'
						});
					}
				})
			},

			//跳转到消息界面
			messageService() {
				uni.navigateTo({
					url: '/pages/profile/message-center'
				});
			},

			// 跳转到设置页面
			setting() {
				uni.navigateTo({
					url: '/pages/profile/system'
				});
			},
			//订单页面跳转
			orderCenter() {
				uni.navigateTo({
					url: '/pages/profile/orderCenter'
				})
			},
			//客服跳转
			customerService() {
				uni.navigateTo({
					url: '/pages/profile/customerService'
				})
			},
			//我的钱包跳转
			myWallet() {
				uni.navigateTo({
					url: '/pages/profile/myWallet'
				})
			},
			//地址管理
			shippingAddress() {
				uni.navigateTo({
					url: '/pages/profile/shippingAddress'
				})
			},
			commodity() {
				uni.navigateTo({
					url: '/pages/profile/Commodity'
				})
			},
			//商品详情
			recommend() {
				uni.navigateTo({
					url: '/pages/profile/recommend'
				})
			}

		},
		onLoad() {
			this.getlistuser()
		}

	}
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		padding-bottom: 20px;
	}

	/* 顶部会员中心 */
	.header {
		background-color: #2ac2d2;
		padding: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		/* 圆形头像 */
		object-fit: cover;
	}

	.default-avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		/* 圆形背景 */
		background-color: white;
		/* 无头像时的白色背景 */
	}

	.header-content {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: space-between;
	}


	.icons {
		display: flex;
		align-items: center;
		gap: 15px;
	}

	.icon {
		width: 25px;
		height: 25px;
	}

	.user-info {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.username-section {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.username {
		color: #ffffff;
		font-size: 20px;
		font-weight: bold;
	}

	.badge {
		background-color: #ffd700;
		color: #ffffff;
		font-size: 12px;
		padding: 2px 6px;
		border-radius: 8px;
		text-align: center;
		margin-left: 15px;

	}

	/* 订单部分 */
	.orders-section {
		background-color: #ffffff;
		margin: 15px 10px;
		padding: 15px;
		border-radius: 10px;
	}

	.review-meta {
		float: right;
		font-size: 22rpx;
		color: #999999;
	}

	.orders-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.section-title {
		font-size: 16px;
		color: #333333;
		font-weight: bold;
	}

	.order-status {
		display: flex;
		justify-content: space-around;
		margin-top: 10px;
	}

	.status-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.order-icon {
		width: 30px;
		height: 30px;
	}

	.status-text {
		font-size: 14px;
		color: #333333;
	}

	/* 钱包 */
	.wallet-section {
		background-color: #ffffff;
		margin: 15px 10px;
		padding: 15px;
		border-radius: 10px;
	}

	.wallet-details {
		display: flex;
		justify-content: space-around;
		margin-top: 10px;
	}

	.wallet-item {
		text-align: center;
	}

	.wallet-item text:first-child {
		font-size: 18px;
		color: #ff6eb4;
		font-weight: bold;
	}

	.wallet-item text:last-child {
		font-size: 12px;
		color: #999999;
	}

	/* 设置部分 */
	.settings-section {
		background-color: #ffffff;
		margin: 15px 10px;
		padding: 15px;
		border-radius: 10px;
	}

	.setting-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 0;
		border-bottom: 1px solid #f5f5f5;
	}

	.setting-item:last-child {
		border-bottom: none;
	}

	.setting-item text {
		font-size: 14px;
		color: #333333;
	}

	.arrow1 {
		width: 20px;
		height: 20px;
		margin-right: 5px;
	}

	.item-content {
		display: flex;
		align-items: center;
	}

	.arrow {
		width: 16px;
		height: 16px;
	}

	/* 推荐 */
	.recommendations {
		margin-top: 20px;
		padding: 10px;
		background-color: #ffffff;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		margin-bottom: 10px;
	}

	.product-list {
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
		/* 每个商品上下之间的间距 */
		padding: 0 10px;
		/* 整体的左右内边距 */
		justify-content: space-between;
	}

	.product-item {
		width: calc(45% - 10px);
		/* 设置商品的宽度为 50%，减去间距的一半 */
		background-color: #f9f9f9;
		padding: 10px;
		text-align: center;
		border-radius: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}


	.product-image {
		width: 100px;
		height: 100px;
		border-radius: 10px;
		margin-bottom: 5px;
	}

	.product-name {
		font-size: 14px;
		color: #333333;
		margin-bottom: 5px;
	}

	.product-price {
		font-size: 16px;
		color: #ff6eb4;
		font-weight: bold;
	}
</style>